import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
import '../../assets/css/mine.css'
import { getbanner} from '../../request/api.js'

export default class mine extends Component {
    constructor(){
        super()
        this.state={
            user:'',
            data: ['1', '2', '3'],
            imgHeight: 100,
            banner:[]
        }
    }
    componentDidMount(){
        this.banner()
     this.username()
     setTimeout(() => {
        this.setState({
          data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
        });
      }, 100);
    }
    banner(){
        getbanner().then(res=>{
         
            this.setState({banner:res.list})  
             console.log(this.state.banner);
        })
    }
    username(){
         
          let a=JSON.parse(sessionStorage.getItem('user')).nickname;
          this.setState({user:a})
          console.log(this.state);
    }
    render() {
        return (
            <div>
                  <div className="my-top w">
        <div className="r1">
            <div className="left">
                <img src="/img/jay.jpg" alt="" />
                <p>
                    <span>{this.state.user}</span>
                    <i>完善资料让小U等懂你</i>
                </p>
            </div>

            <div className="right">
                <i></i> <span>每日签到</span>
            </div>

        </div>
        <ul>
            <li>
                <p>12</p>
                <i>我的收藏</i>
            </li>
            <li>
                <p>12</p>
                <i>我的收藏</i>
            </li>
            <li>
                <p>12</p>
                <i>我的收藏</i>
            </li>
            <li onClick={()=>this.coupon()}>
                <p>12</p>
                <i>优惠券</i>
            </li>
        </ul>
        <div className="bott">
            <div className="top">
                <h3>我的订单</h3>
                <a href="">全部订单 &gt;</a>
            </div>
            <ul>
                <li>
                    <img src="/img/payment.png" alt="" />
                    <span>代收款</span>
                </li>
                <li>
                    <img src="/img/payment.png" alt="" />
                    <span>代收款</span>
                </li>
                <li>
                    <img src="/img/delivery.png" alt="" />
                    <span>代收款</span>
                </li>
                <li>
                    <img src="/img/evaluation.png" alt="" />
                    <span>代收款</span>
                </li>
               
            </ul>
        </div>
        <WingBlank >
        <Carousel
          autoplay={true}
          infinite
        >
          {this.state.banner.map(val => (
            <a
              key={val}
              href=""
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.img}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    </div>
    <ul className="mine-content w">
        <li>
            <a href="">
                <i></i><span>管理地址</span>
                <b>&gt;</b>
            </a>
        </li>
        <li>
            <a href="">
                <i></i><span>我的钱包</span>
                <b>&gt;</b>
            </a>
        </li>
        <li>
            <a href="">
                <i></i><span>我的二维码</span>
                <b> 剩余200U币 &gt;</b>
            </a>
        </li>
        <li>
            <a href="">
                <i></i><span>我的小伙伴</span>
                <b>&gt;</b>
            </a>
        </li>
        <li>
            <a href="">
                <i></i><span>0元试用</span>
                <b>&gt;</b>
            </a>
        </li>
    </ul>
                
            </div>
        )
    }
    coupon(){
        this.props.history.push('/coupon')
    }
}
